<template>
    <div class="card pb-4">
      <div class="card-header pb-0 p-3">
        <div class="row">
          <div class="col-6 d-flex align-items-center">
          </div>
          <div class="col-3 text-end" style="justify-content: flex-end; margin-left: auto;">
            <!-- <argon-button color="success" size="sm" variant="outline">Create new order</argon-button> -->
          </div>
        </div>
      </div>
      <div class="card-body p-3 pb-0 mb-0 table-responsive p-0">
        <table class="table align-items-center mb-0 text-center">
          <thead>
            <tr >
              <td class="text-uppercase text-secondary text-md font-weight-bolder">
                User Name
              </td>
              <td class="text-uppercase text-secondary text-md font-weight-bolder">
                E-mail
              </td>
              <td class="text-uppercase text-secondary text-md font-weight-bolder">
                Identity
              </td>
              <td class="text-uppercase text-secondary text-md font-weight-bolder">
                VIP
              </td>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="user in userList" :key="user"
            >
              <td class="text-xs font-weight-bold mb-0">
                <h6 class="mb-0 text-dark font-weight-bold text-md">{{ user.user_name }}</h6>
                <span class="text-xs">#{{user.id}}</span>
              </td>
              <td>
                <p class="text-xs font-weight-bold mb-0">{{ user.email }}</p>
              </td>
              <td class="text-xs font-weight-bold mb-0" v-if="user.identity == 2">
                <!-- <span class="badge badge-sm bg-gradient-secondary">User</span> -->
                <argon-badge color="secondary" variant="gradient"> User</argon-badge>
              </td>
              <td class="text-xs font-weight-bold mb-0" v-else-if="user.identity == 1">
                <!-- <span class="badge badge-sm bg-gradient-success">Employee</span> -->
                <argon-badge color="success" variant="gradient">Employee </argon-badge>
              </td>
              <td class="text-xs font-weight-bold mb-0" v-if="user.vip == 0">
                <!-- <span class="badge badge-sm bg-gradient-secondary">User</span> -->
                <argon-badge color="secondary" variant="gradient">VIP</argon-badge>
              </td>
              <td class="text-xs font-weight-bold mb-0" v-else>
                <!-- <span class="badge badge-sm bg-gradient-success">Employee</span> -->
                <argon-badge color="warning" variant="gradient">VIP</argon-badge>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>
  
  <script>
  // import ArgonButton from "@/components/ArgonButton.vue";
  import axios from 'axios';
  import ArgonBadge from '../../components/ArgonBadge.vue';

  export default {
    name: "user-table",
    components: {
      // ArgonButton,
      ArgonBadge,
    },
    data(){
      return{
        userList:[]
      }
    },
    mounted(){
      axios
      .get('https://fitzone.work:8080/user')
      .then(res =>{
        console.log(res.data);
        res.data.forEach(element => {
            if(element.identity != '0'){
                this.userList.push(element)
            }
        });
      })
      .catch(err =>{
        console.error(err);
      })
    }
  };
  
  </script>
  